{include "INC_header.html" title="SSO模块管理"}
<div id="app-outlet" class="app-outlet">
    <!-- 侧栏菜单 -->
    <aside>
        <div class="app-icon">SSO</div>
        <!-- 菜单 -->
        <menu>
            <a-tooltip v-else placement="right" :title="menu.name" v-for="(menu, index) in menus">
                <div class="item" :class="{ active:activeIndex === index }" @click="setMenu(index)">
                    <div class="start"><i :class="menu.icon"></i></div>
                    <div class="center">{{ menu.name.length > 2 ? menu.name.slice(0, 2) : menu.name }}</div>
                </div>
            </a-tooltip>
        </menu>
        <div class="text-center text-small padding"><a href="https://inphp.cc" target="_blank">INPHP</a></div>
    </aside>
    <!-- 子菜单 -->
    <aside class="extend-module" v-if="selfMenu.subMenu.length > 0">
        <div class="module-name">{{ selfMenu.name }}</div>
        <menu>
            <dl v-for="(menu, mi) in selfMenu.subMenu" :class="{ open: menu.open === true || menu.open === undefined }">
                <dt>
                    <template v-if="menu.subMenu != undefined && menu.subMenu != null && menu.subMenu.length > 0">
                        <div class="item-hd" @click="toggleMenu(mi)">
                            <div class="start" v-if="menu.icon != null && menu.icon != undefined && menu.icon != ''"><i :class="menu.icon"></i></div>
                            <div class="center">{{ menu.name.slice(0, 4) }}</div>
                            <div class="end">
                                <i class="fa-regular fa-chevron-right"></i>
                            </div>
                        </div>
                    </template>
                    <a-tooltip v-else placement="right" :title="menu.name">
                        <div class="item" :class="{ active: menuIndex==mi && subMenuIndex==-1  }" @click="selectMenu(mi)" >
                            <div class="start"><i :class="menu.icon"></i></div>
                            <div class="center">{{ menu.name }}</div>
                        </div>
                    </a-tooltip>
                </dt>
                <dd v-if="menu.subMenu != undefined && menu.subMenu != null && menu.subMenu.length > 0">
                    <a-tooltip v-for="(sm, si) in menu.subMenu" placement="right" :title="sm.name">
                        <div :class="{ active:menuIndex==mi && subMenuIndex==si }" class="item" @click="selectSubMenu(mi, si)">
                            <div class="start" v-if="sm.icon != null && sm.icon != undefined && sm.icon != ''"><i :class="sm.icon"></i></div>
                            <div class="center">{{ sm.name }}</div>
                        </div>
                    </a-tooltip>
                </dd>
            </dl>
        </menu>
    </aside>
    <!-- 主体框架内容 -->
    <div class="app-container">
        <header class="ui flex-item padding-left padding-right border-bottom light-background">
            <div class="center justify-center">
                <div class="ui breadcrumb">
                    <div class="item" v-for="b in location">{{ b.name }}</div>
                </div>
            </div>
            <div class="end justify-center">
                <a-tooltip title="网站首页" placement="bottom">
                    <a-button shape="circle" href="/" target="_blank">
                        <template #icon>
                            <i class="fa-light fa-house"></i>
                        </template>
                    </a-button>
                </a-tooltip>
            </div>
            <div class="end justify-center">
                <a-popover :title="user.admin == 1 ? '超级管理员' : '普通账号'" placement="bottomRight">
                    <template #content>
                        <div class="text-small">
                            <div class="ui flex-item padding-bottom-half">
                                <div class="center medium-text">账号</div>
                                <div class="end">{{ user.username }}</div>
                            </div>
                            <div class="ui flex-item padding-bottom-half">
                                <div class="center medium-text">昵称</div>
                                <div class="end">{{ user.nickname }}</div>
                            </div>
                            <div class="ui flex-item padding-bottom-half">
                                <div class="center medium-text">手机</div>
                                <div class="end">{{ user.phone != '' && user.phone != null ? ('+' + user.countryCode + ' ' + user.phone) : '-' }}</div>
                            </div>
                            <div class="ui flex-item padding-bottom-half">
                                <div class="center medium-text">注册时间</div>
                                <div class="end">{{ user.registerTime || '-' }}</div>
                            </div>
                            <div class="ui flex-item padding-bottom-half">
                                <div class="center medium-text">IP</div>
                                <div class="end">{{ user.ip || '-' }}</div>
                            </div>
                        </div>
                        <div class="ui row margin-top-half">
                            <div class="col auto-width">
                                <a-button size="small" block @click="editUser()">修改资料</a-button>
                            </div>
                            <div class="padding-half"></div>
                            <div class="col auto-width">
                                <a-button size="small" block @click="logout()">退出登陆</a-button>
                            </div>
                        </div>
                    </template>
                    <a-avatar :size="32" :src="user.face" style="background: #fff; border: solid 1px #ddd;">
                        <i class="fa-light fa-user-tie dark-text" v-if="user.face == null"></i>
                    </a-avatar>
                </a-popover>
            </div>
        </header>
        <main class="app-container">
            <iframe width="100%" height="100%" scrolling="auto" :src="iframeSrc" frameborder="0"></iframe>
        </main>
    </div>
    <!-- 账号编辑 -->
    <a-modal
            v-model:visible="userEdit.show"
            title="修改当前管理员账户资料"
            :confirm-loading="userEdit.loading"
            cancel-text="取消"
            ok-text="保存"
            @ok="saveUser">
        <!-- 其它字段 -->
        <div class="ui form">
            <div class="field">
                <div class="label">用户名</div>
                <div class="">
                    <a-input v-model:value="userEdit.username" placeholder="用户名(唯一，不可与现有账号重复)" />
                </div>
            </div>
            <div class="field">
                <div class="label">手机号码</div>
                <div class="ui flex-item">
                    <div class="start">
                        <a-select v-model:value="userEdit.countryCode">
                            <a-select-option :value="cc.code" v-for="cc in countryList">+{{ cc.code }} {{ cc.cn }}</a-select-option>
                        </a-select>
                    </div>
                    <div class="center">
                        <a-input v-model:value="userEdit.phone" placeholder="手机号码" />
                    </div>
                </div>
            </div>
            <div class="field">
                <div class="label">昵称</div>
                <div class="">
                    <a-input v-model:value="userEdit.nickname" placeholder="填写昵称" />
                </div>
            </div>
        </div>
    </a-modal>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message, Modal } = antd;
    const app = createApp({
        data() {
            return {
                //数据
                collapsed: false,
                //菜单
                menus: [],
                //当前菜单
                selfMenu: {
                    name: "",
                    icon: "",
                    subMenu: []
                },
                //
                activeIndex: 0,
                menuIndex: -1,
                subMenuIndex: -1,
                //当前链接
                iframeSrc: null,
                //账号信息
                user: {
                    uid: 0,
                    username: '',
                    nickname: '',
                    phone: '',
                    countryCode: 86,
                    face: ''
                },
                userEdit: {
                    show: false,
                    username: '',
                    nickname: '',
                    countryCode: 86,
                    phone: ''
                },
                //国家代码列表
                countryList: [],
                //位置信息
                location: [
                    { name: "控制台" }
                ]
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function () {
                const hide = message.loading('正在加载菜单数据', 0);
                let self = this;
                axios.get("{url url='/sso/api/admin/menus'}").then(({ data }) => {
                    hide();
                    if (data.error !== 0) {
                        if (data.error === 30) {
                            window.location.href = "{url url='/sso/web/index'}?redirect={url url='/sso/admin'}";
                        } else {
                            message.error(data.message);
                        }
                    } else {
                        self.menus = data.data;
                        this.getUserInfo();
                    }
                }).catch(() => {
                    hide();
                    message.error("加载菜单失败");
                });
            },
            getUserInfo: function () {
                const hide = message.loading('正在加载账户数据', 0);
                let self = this;
                axios.get("{url url='/sso/api/user'}").then(({ data }) => {
                    hide();
                    if (data.error !== 0) {
                        if (data.error === 30) {
                            window.location.href = "{url url='/sso/web/index'}?redirect={url url='/sso/admin'}";
                        } else {
                            message.error(data.message);
                        }
                    } else {
                        self.user = data.data;
                    }
                }).catch(() => {
                    hide();
                    message.error("加载账户失败");
                });
            },
            setMenu: function (index) {
                let self = this;
                //有下级菜单
                let menu = this.menus[index];
                if (menu.subMenu != undefined && menu.subMenu.length > 0) {
                    if (this.activeIndex != index) {
                        this.menuIndex = -1;
                        this.subMenuIndex = -1;
                    }
                } else {
                    //没有，直接刷新网页
                    if (menu.url) {
                        self.iframeSrc = '';
                        setTimeout(() => {
                            self.iframeSrc = menu.url;
                        }, 0);
                        this.location = [
                            { name: menu.name }
                        ];
                    }
                }
                menu.subMenu = menu.subMenu || [];
                this.activeIndex = index;
                this.selfMenu = menu;
            },
            //支持多次点击同一个菜单刷新页面
            selectMenu: function (index) {
                let url = this.selfMenu.subMenu[index].url;
                this.location = [
                    { name:this.selfMenu.subMenu[index].name },
                ];
                if (url == this.iframeSrc) {
                    this.iframeSrc = '';
                    setTimeout(() => {
                        this.iframeSrc = url;
                    }, 0);
                } else {
                    this.iframeSrc = url;
                }
                this.menuIndex = index;
                this.subMenuIndex = -1;
            },
            selectSubMenu(mi, si) {
                let menu = this.selfMenu.subMenu[mi].subMenu[si];
                this.location = [
                    { name:this.selfMenu.subMenu[mi].name },
                    { name:menu.name }
                ];
                if (menu.url == this.iframeSrc) {
                    this.iframeSrc = '';
                    setTimeout(() => {
                        this.iframeSrc = menu.url;
                    }, 0);
                } else {
                    this.iframeSrc = menu.url;
                }
                this.menuIndex = mi;
                this.subMenuIndex = si;
            },
            toggleMenu(index) {
                this.selfMenu[index].open = this.selfMenu[index].open === undefined ? false : !this.selfMenu[index].open;
            },
            editUser: function () {
                this.userEdit.uid = this.user.uid;
                this.userEdit.username = this.user.username;
                this.userEdit.countryCode = this.user.countryCode;
                this.userEdit.phone = this.user.phone;
                this.userEdit.nickname = this.user.nickname;
                if (this.countryList.length === 0) {
                    let self = this;
                    axios.get("{url url='/sso/api/sms/countryList'}").then(({ data }) => {
                        self.countryList = data.data;
                    }).catch(() => {
                        self.countryList = [{ code:86, en:"China", cn:"中国大陆" }];
                    });
                }
                this.userEdit.show = true;
            },
            saveUser: function () {
                this.userEdit.loading = true;
                let self = this;
                axios.post("{url url='/sso/api/admin/user/save'}", this.userEdit).then(({ data }) => {
                    self.userEdit.loading = false;
                    if (data.error === 0) {
                        self.userEdit.show = false;
                        self.getUserInfo();
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.userEdit.loading = false;
                    message.error("服务端繁忙");
                });
            },
            logout: function () {
                let self = this;
                Modal.confirm({
                    content: "确定退出？",
                    onOk(){
                        return new Promise((resolve, reject) => {
                            axios.get("{url url='/sso/api/user/logout'}").then(({ data }) => {
                                window.location.href = "{url url='/sso/web/index'}?redirect={url url='/sso/admin'}";
                                resolve();
                            }).catch(() => { message.error("服务端繁忙");})
                        });
                    },
                    cancelText: "取消",
                    okText: "确定"
                })
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");//监听相关事件
    window.onmessage = _event => {
        let msg = _event.data;
        if (typeof msg === 'object' && msg.event) {
            switch (msg.event) {
                case "location":
                    //路径监听
                    vm.location = msg.data || [{ name: '未知页面' }];
                    break;
                case "reload":
                    window.location.reload();
                    break;
                case "login":
                    window.location.href = "{url url='/sso/web/index'}?redirect={url url='/sso/admin'}";
                    break;
            }
        }
    };
</script>
{include "INC_footer.html"}